<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="80">
			<FormItem class="w-50" label="分类编号">
				<label>{{category.categoryId}}</label>
			</FormItem>
	
			<FormItem class="w-50" label="分类名称">
				<Input v-model="category.name" placeholder="请输入分类名称" clearable></Input>
			</FormItem>
			
			<FormItem class="w-50" label="分类状态">
				<i-switch v-model="category.statu"></i-switch>
			</FormItem>
			
			<FormItem class="w-50" label="当前分类等级:">
				<label>{{category.level}}</label>
			</FormItem>
			
			<FormItem class="w-50" label="父级分类">
				<Input v-if="psName" v-model="psName" placeholder="请输入分类名称" @onchange="pName(this.psName)"></Input>
				<Select v-if="!psName"  @on-change="loadCategorys(item.categoryId, item.value)" v-for="(item, index) in this.categorysArrays" :key="index" v-model="item.value">
					<Option v-for="(category, jndex) in item.source" :key="jndex" :value="category.categoryId">{{category.name}}</Option>
				</Select>
				<Button type="error" style="float: right;" @click="removePs">重置分类</Button>
			</FormItem>
			
			<FormItem class="w-50" label="分类封面">
				<div class="d-flex flex-row">
					<label class="ivu-input">{{coverFile.name}}</label>
					<label style="line-height: 30px;" class="ivu-btn ivu-btn-default ml-1" for="cover">选择文件</label>
					<input @change="fileChange($event,coverFile)" id="cover" style="display: none;" type="file"></input>
				</div>
				<!-- 封面图片没上传就显示image中存的图片 -->
				<div class="d-flex flex-row mt-2" v-if="!coverFile.name">
				     <img v-if="image.url" class="w-25" :src="'https://'+image.url" />
				</div>
				<!-- 封面图片上传后就显示封面图片 -->
				<div class="d-flex flex-row mt-2" v-if="coverFile.name">
					<img v-if="coverFile.url" class="w-50" :src="coverFile.url" />
				</div>
			</FormItem>
			
			<FormItem class="w-100" label="图文内容">
				<div style="display: block; position: relative; z-index: 0;" id="editor">
					
				</div>
			</FormItem>
			
			<FormItem class="text-right">
				<Button @click="submit" type="primary">提交</Button>
				<Button @click="cancel" class="ml-2">取消</Button>
			</FormItem>
			
		</Form>
	</Layout>
</template>

<script>
	import E from "wangeditor";
	export default {
		data() {
			return {
				category: {
					categoryId: "",
					name: "",
					level: "",
					pId: "",
					statu: "",
					imgId: "",
					config:""
				},
				image: {
					imgId: "",
					url: "",
					statu: "",
					dFlg: ""
				},
				category_detail: {
					categoryId: "",
					detailId: "",
					contant: "",
				},
				coverFile: {
					name: "",
					file: undefined,
					url: ""
				},
				editor: undefined,
				contant: "",
				num:"",
				psName:"",
				categorysArrays: [
					
				]
			}
		},
		methods: {
			removePs: function(){
				this.psName = "";
				this.categorysArrays=[];
				this.loadCategorys(null, 0);
				this.category.level = 0;
			},
			pName: function(name){
				this.psName = "";
			},
			showPName: function(){
				let self = this;
				this.http.get({
					url: "/product/pName",
					param: {
						categoryId: self.category.categoryId
					}
				}).then(data => {
					self.psName = data.name;
				});
			},
			loadCategorys: function(event, categoryId) {
				
				let targetIndex = undefined;
				for (let index = 0; index < this.categorysArrays.length; index++) {
					let targetCategorys = this.categorysArrays[index];
					if (event === targetCategorys.categoryId) {
						targetIndex = index;
						break;
					}
				}
				
				targetIndex = targetIndex + 1;
				
				if (targetIndex !== undefined) {
					this.categorysArrays.splice(targetIndex, this.categorysArrays.length - targetIndex);
					// console.log(this.categorysArrays);
					
				}
				
				if (categoryId !== null && categoryId !== undefined && categoryId !== "") {
					this.http.get({
						url: "/product/category/info",
						param: {
							categoryId
						}
					}).then(res => {
						
						let categorysSource = {
							categoryId,
							value: "",
							source: res.category.subCategory
						};
						this.categorysArrays.push(categorysSource);
						
					});
				}
				this.category.pId = categoryId;
				if (categoryId !=0){
					let self = this;
					//查询
					this.http.get({
						url: "/product/category/info",
						param: {
							categoryId: categoryId
						}
					}).then(data => {
						self.category.level = data.category.level + 1;
					});
				}
				
				
				// console.log(this.category.pId);
			},
			fileChange: function(e,imgItem) {
				// this.coverFile.file = e.target.files[0];
				// this.coverFile.name = this.coverFile.file.name;
				// this.coverFile.onProgress = this.onProgress;
				imgItem.file = e.target.files[0];
				imgItem.name = imgItem.file.name;
				
				let reader = new FileReader();
				reader.onloadend = function() {
					imgItem.url = this.result;
					this.url = this.result;
				}
				reader.readAsDataURL(imgItem.file);
				imgItem.onProgress = this.onProgress;
			},
			onProgress: function(pData) {
				console.log(pData);
			},
			
			changeP: function(selectedPermissionId) {
				if (selectedPermissionId === 0) {
					this.permission.path = "";
				}
			},
			submit: function() {
				let self = this;
				
				if (this.category.name.length === 0) {
					this.message.error("请输入分类名称");
					return;
				}
				if (this.category.pId === 0) {
					this.message.error("请选择父级");
					return;
				}
				
				delete self.category.cu;
				delete self.category.ct;
				delete self.category.uu;
				delete self.category.ut;
				//修改分类详细信息
				
				if (self.coverFile.name == ""){
					self.http.put({
						url: "/product/category/cInfo",
						param: {
							categoryId: self.category.categoryId,
							name: self.category.name,
							statu: self.category.statu,
							level: self.category.level,
							pId: self.category.pId,
							contant: self.editor.txt.html(),
						}
					}).then(data => {
						self.message.info("更改成功");
						self.$tabs.close();
					});
				}else{
					this.common.submitFile(this.coverFile).then(function(res) {
						self.coverFile.url = res.Location;
						self.http.put({
							url: "/product/category/cInfo",
							param: {
								categoryId: self.category.categoryId,
								name: self.category.name,
								statu: self.category.statu,
								level: self.category.level,
								pId: self.category.pId,
								imgId: self.category.imgId,
								url:self.coverFile.url,
								contant: self.editor.txt.html(),
							}
						}).then(data => {
							self.message.info("修改成功");
							self.$tabs.close();
						});
					}).catch(function(err) {
						self.message.error("封面文件上传失败，取消修改产品。");
					});
				}
			},
			cancel: function() {
				this.$tabs.close();
			},
			init: function() {
				let self = this;
				//查询
				this.http.get({
					url: "/product/category/info",
					param: {
						categoryId: self.category.categoryId
					}
				}).then(data => {
					self.category = data.category;
					self.category.level = data.category.level;
					if(data.image){
						self.image.url = data.image.url
					};
					if(data.categoryDetails[0]){
						self.editor.txt.html(data.categoryDetails[0].contant);
					};
					
				});
			}
		},
		created: function(){
			this.category.categoryId = this.$route.query.categoryId;
			this.init();
			this.loadCategorys(null, 0);
			this.showPName();
		},
		mounted: function() {
			this.editor = new E("#editor");
			let self = this;
			this.editor.config.customUploadImg = this.common.editorUploadFile;
			/* this.editor.config.customUploadViSdeo = this.common.editorUploadVideo; */
			this.editor.create();
		},
	}
</script>